<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2022/2/20
  Time: 9:12
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <meta charset="utf-8">
    <base href="${pageContext.request.contextPath}/">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="static/js/layuia/css/layui.css"
          tppabs="https://www.layui.site/layui/dist/css/layui.css" media="all">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
<%--<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">--%>
<%--    <legend>简洁风格的Tab</legend>--%>
<%--</fieldset>--%>

<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
    <ul class="layui-tab-title">
        <li class="layui-this">未读消息</li>
        <li>已读消息</li>
        <li>发送的消息</li>
        <li>消息查询</li>
    </ul>

    <div class="layui-tab-content" style="height: 100px;">
        <div class="layui-tab-item layui-show">


            <div class="layui-collapse" lay-filter="test">
                <div class="layui-colla-item">
                    <h2 class="layui-colla-title" style="color: red">显示最近50条消息</h2>
                    <div class="layui-colla-content">
                        <p>没有符合条件的记录。</p>
                    </div>
                </div>
            </div>
        </div>

        <div class="layui-tab-item">

            <div class="layui-collapse" lay-filter="test">
                <div class="layui-colla-item">
                    <h2 class="layui-colla-title" style="color: red">显示最近50条消息</h2>
                    <div class="layui-colla-content">
                        <p>没有符合条件的记录。</p>
                    </div>
                </div>
            </div>
        </div>

            <div class="layui-tab-item">
                <div class="layui-collapse" lay-filter="test">
                    <div class="layui-colla-item">
                        <h2 class="layui-colla-title" style="color: red">显示最近50条消息</h2>
                        <div class="layui-colla-content">
                            <p>没有符合条件的记录。</p>
                        </div>
                    </div>
                 </div>
            </div>
            <div class="layui-tab-item">

                <form class="layui-form" action="">

                    <div class="layui-form-item">
                        <label class="layui-form-label">类别</label>
                        <div class="layui-input-block">
                            <select name="type" lay-verify="required">
                                <option value=""></option>
                                <option value="0">待办事宜</option>
                                <option value="1" selected>短信消息</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">起始时间</label>
                        <div class="layui-inline"> <!-- 注意：这一层元素并不是必须的 -->
                            <input type="text" class="layui-input" id="test1">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">结束时间</label>
                        <div class="layui-inline"> <!-- 注意：这一层元素并不是必须的 -->
                            <input type="text" class="layui-input" id="test2">
                        </div>
                    </div>

                    <div class="layui-form-item layui-form-text">
                        <label class="layui-form-label">
                            <select name="type" lay-verify="required">
                                <option value=""></option>
                                <option value="0">发送人</option>
                                <option value="1" selected>接收人</option>
                            </select>
                        </label>
                        <div class="layui-input-block">
                            <textarea name="desc" placeholder="请输入内容" class="layui-textarea" style="width: 300px"></textarea>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">是否已读</label>
                        <div class="layui-input-block">
                            <input type="radio" name="yes" value="是" title="是">
                            <input type="radio" name="yes" value="否" title="否" >
                        </div>
                    </div>
                    <div class="layui-form-item layui-form-text">
                        <label class="layui-form-label">内容</label>
                        <div class="layui-input-block">
                            <textarea name="desc" placeholder="请输入内容" class="layui-textarea" style="width: 300px"></textarea>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">条数限制</label>
                        <div class="layui-input-inline">
                            <input type="text" name="password" required lay-verify="required" placeholder="请输入条数限制" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button class="layui-btn" lay-submit lay-filter="formDemo">查询</button>
                            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                        </div>
                    </div>
                </form>

            </div>
        </div>
    </div>

    <script src="static/js/layuia/layui.js" charset="utf-8"></script>
    <!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->
    <script>
        layui.use('laydate', function(){
            var laydate = layui.laydate;

            //执行一个laydate实例
            laydate.render({
                elem: '#test1'//指定元素
            });

            laydate.render({
                elem: '#test2'//指定元素
            });
        });
    </script>
</body>
</html>
